<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>2024待办事项</title>
  <link rel="stylesheet" href="css/tasklist.css" />
</head>

<body>
  <div id="box">
    <header>
      <h1>2024待办事项</h1>
      <form id="new-task-form">
        <input type="text" id="new-task-input" placeholder="把计划写下来吧?" v-model="task" />
        <input type="submit" id="new-task-submit" value="Add Task" @click.prevent="addthings()" />
      </form>
    </header>
    <main>
      <section class="task-list">
        <h2>任务列表</h2>
        <div id="tasks">
          <template v-for="(item, index) in tasks" :key="index">
            <div class="task">
              <div class="content">
                <input type="text" class="text" v-model="item" :disabled="readonly[index]" />
              </div>
              <div class="actions">
                <button class="edit" @click="handleTask(index,item)">{{ BigIntName[index] }}</button>
                <button class="delete" @click="deleteTask(index)">Delete</button>
              </div>
            </div>
          </template>
        </div>
      </section>
    </main>
  </div>
  <!-- <script src="js/tasklist.js"></script> -->
  <script src="./js/vue.global.js"></script>
  <script>
    const app = {
      data() {
        return {
          task: "",
          tasks: [],
          readonly: [],
          BigIntName: [],
        }
      },
      methods: {
        addthings() {
          if (this.task) {
            this.tasks.push(this.task)
            this.task = ''
            this.BigIntName.push("编辑")
            this.readonly.push(true)
          }
        },
        deleteTask(index) {
          this.tasks.splice(index, 1)
          this.BigIntName.splice(index, 1)
          this.readonly.splice(index, 1)
        },
        handleTask(index, item) {
          if (this.BigIntName[index] == "编辑") {
            this.BigIntName[index] = "保存"
            this.readonly[index] = !this.readonly[index]
          } else {
            this.tasks[index] = item
            this.readonly[index] = !this.readonly[index]
            this.BigIntName[index] = "编辑"
          }
        }
      }
    }
    Vue.createApp(app).mount("#box")
  </script>
</body>

</html>